<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>

		<el-card>

			<div class="main">
				<table border="1">
					<tr>
						<th>
							<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" />
						</th>
						<th>Id</th>
						<th>Name</th>
						<th>Problem</th>
					</tr>
					<tr v-for="(item,index) in testData" :key="index">
						<td>
							<!-- value的值就是v-model的值 -->
							<input type="checkbox" :value="item" v-model="checkedData" />
						</td>
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>
						<td>{{item.problem}}</td>
					</tr>
				</table>
			</div>
			<div class="checks">
				<span>选择的值为:{{checkedData}}
				</span>
			</div>

			<div @click="confirmed">
				确定
			</div>

		</el-card>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				// 选中的数据
				checkedData: [],
				// 是要对比的数据，也是由后端请求回来的数据
				testData: [{
						id: 1,
						name: "a",
						problem: "问题1"
					},
					{
						id: 2,
						name: "b",
						problem: "问题2"
					},
					{
						id: 3,
						name: "c",
						problem: "问题3"
					},
				],
				//最后要的数据
				problems:[]
			}
		},
		watch: {
			"checkedData":function() {
				if (this.checkedData.length == this.testData.length) {
					//全选
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
		},
		methods: {
			//点击全选
			changeAllChecked: function() {
				if (this.checked) {
					//全选
					this.checkedData = this.testData;
				} else {
					this.checkedData = [];
				}
			},
			//确认
			confirmed(){
				// console.log(this.checkedData)
				this.problems=[]
				for(var i=0;i<this.checkedData.length;i++){
					// this.problems[i]=this.checkedData[i].problem
					this.problems.push(this.checkedData[i].problem)
				}
				console.log(this.problems)
			}
		}
	}
</script>

<style>
	.el-card {
		margin-top: 15px;
	}
	
	.main {
	  display: flex;
	  justify-content: center;
	}
	table {
	  text-align: center;
	}
	th {
	  width: 100px;
	}
	.checks {
	  font-size: 16px;
	  text-align: center;
	}

</style>
